import React, { Component,PropTypes} from 'react';
import {Link} from 'react-router';
import Top from '../CommonComponent/Top'
import Split from '../../Component/CommonComponent/Split';
import CommonBtn from '../../Component/CommonComponent/CommonBtn';
import EnterPassword from '../../Component/CommonComponent/EnterPassword';
//import '../../Stylesheets/App/personal.css';
import {Cash,MyInfo} from '../../Action/auth'
import {CheckNum} from '../../Action/rpc'

export default class WithdrawCash extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.copyArray=[]
        this.state = {
            toShowModal:false,
            amount:'',
            Reminder:'',
            now_amount:0,
            frozen:0,
            allAmount:0
        };
    }

    static contextTypes = {
        router:PropTypes.object
    }

    async componentWillMount() {
        await this.getMyInfo()
        this.setState({allAmount:parseInt(this.state.now_amount)})
    }

    async getMyInfo(){
        await MyInfo()
            .then(res=>{
                this.setState({
                    now_amount : res.NOW_AMOUNT,
                    frozen:res.FROZEN
                })
            })
    }

    //确认提现
    confirmIncome(){
        //this.setState({toShowModal:true})
        const {bankcardId} = this.props.location.query
        if(!bankcardId){
            alert('请选择所需银行卡')
            return
        }
        if(!this.state.amount || !CheckNum(this.state.amount)){
            alert('请输入提现金额')
            return
        }
        if(this.state.amount > this.state.now_amount){
            alert('可提现金额不足')
            return
        }
        if(this.state.amount < 18 || this.state.amount > 50000){
            alert('提现金额应在18~50000之间')
            return;
        }

        if(confirm("确认提现" + this.state.amount +"元?")){
            this.getCash(bankcardId,this.state.amount)
        }else{
            return;
        }


    }

    async getCash(bankcardId,amount) {
        await Cash(bankcardId,amount)
            .then(res=> {
                alert('提现申请已提交,平台审核中')
                this.context.router.push({pathname:'/balance'})
            })
            .catch(err=> {
                this.setState({Reminder:err.message})
            })
    }

    render() {
        const {toShowModal,now_amount,frozen,allAmount} = this.state
        const {toChange,bankname,bankcardNo} = this.props.location.query
        return (
            <div>
                <Top
                    title ={'申请提现'}
                />
                <div className="containerNav" style={{top:50}}>

                    <div className="bank_select m0 flex flex-align-center">
                        <ul className="width100">
                            {
                                toChange?
                                    <Link to='/commissionCash'>
                                        <li className="flex flex-pack-justify flex-align-center" style={{height:50,padding:'0 10px'}}>
                                            <div className="flex flex-align-center">
                                                <span className="di" style={{width:'2rem',height:'2rem'}}>
                                                    <img className="border_ra50" src={require('../../Images/common/cardbk.png')} alt=""/>
                                                </span>
                                                <div style={{marginLeft:10}}>
                                                    <div className="f14 color6">{bankname}银行</div>
                                                    <div className="f12 color9">尾号{bankcardNo}的卡</div>
                                                </div>
                                            </div>
                                            <span className="di" style={{width:9,height:16,lineHeight:0}}>
                                                <img className="border_ra50" src={require('../../Images/rightArrow.png')} alt=""/>
                                            </span>
                                        </li>
                                    </Link>
                                    :
                                    <Link to='/commissionCash'>
                                        <li className="item-content item-link item-link">
                                            <div className ="item-inner flex flex-align-center" style={{marginLeft:10}}>
                                                <div className="item-title-row flex-1">
                                                    <div className="f14 color9">请选择提现账号</div>
                                                </div>
                                                <div style={{marginRight:20}}>
                                                    <img src={require('../../Images/rightArrow.png')} style={{width:9,height:16}} alt=""/>
                                                </div>
                                            </div>
                                        </li>
                                    </Link>
                            }
                        </ul>
                    </div>
                    <Split />
                    <div className="plAll">
                        <p className="color6 f14">提现金额</p>
                        <div className="mt5 mb1 f25 df">
                            <span style={{width:40}}>￥</span>
                            <input
                                className="borderno"
                                type="text"
                                placeholder="0.00"
                                ref='pointAmount'
                                onChange={()=>this.setState({amount:this.refs.pointAmount.value})}
                            />
                        </div>
                    </div>
                    <div className="plAll border_top border_bottom f12 flex flex-pack-justify">
                        <div>
                            <span>最多可提取</span>
                            <span className="di ml">￥</span><span>{now_amount}</span>
                        </div>
                        <div>
                            单笔最高提现￥50000
                        </div>
                    </div>
                    <Split />
                    <div className="tc f12 colorRed width_100 plr mtb loginHeight">
                        {this.state.Reminder}
                    </div>
                    <div className="plr">
                        <button
                            className="lh20 border_ra colorfff bgDefault width100"
                            style={{border:0}}
                            onClick={()=>this.confirmIncome()}
                        >
                            确认提现
                        </button>
                    </div>
                </div>

                {/*模态层*/}
                {
                    toShowModal?
                        <EnterPassword />
                        : null
                }
            </div>
        );
    }
}
